<template>
  <div id="profileContent">
    <div id="foodRecommend">
      <el-calendar id="profileCalendar" v-model="value">
      </el-calendar>
    </div>
    <div id="profileInfo">
      <p id="personalInfo">个人信息 Personal Information</p>
      <table id="infoTable" cellspacing="0" cellpadding="0" border="0">
        <tr height="20%">
          <td width="30%"><p style="font-size:16px; font-weight: bold">用户姓名</p></td>
          <td width="10%"><p style="font-size:20px; font-weight: bolder">:</p></td>
          <td>{{username}}</td>
        </tr>
        <tr height="20%">
          <td><p style="font-size:16px; font-weight: bold">用户性别</p></td>
          <td><p style="font-size:20px; font-weight: bolder">:</p></td>
          <td>{{gender}}</td>
        </tr>
        <tr height="20%">
          <td><p style="font-size:16px; font-weight: bold">用户年龄</p></td>
          <td><p style="font-size:20px; font-weight: bolder">:</p></td>
          <td>{{age}}</td>
        </tr>
        <tr height="20%">
          <td><p style="font-size:16px; font-weight: bold">手机号码</p></td>
          <td><p style="font-size:20px; font-weight: bolder">:</p></td>
          <td>{{phone}}</td>
        </tr>
        <tr height="20%">
          <td><p style="font-size:16px; font-weight: bold">电子邮箱</p></td>
          <td><p style="font-size:20px; font-weight: bolder">:</p></td>
          <td>{{email}}</td>
        </tr>
      </table>
      <p id="infoSetting">账户设置  Account Setting</p>
      <el-form
          id="settingTable"
          :model="settingInfoData"
          :rules="settingInfoRules"
          ref="settingInfoData"
          label-position="right">
        <el-form-item label="用户名" label-width="100px" prop="username" >
          <el-input id="unameInfo" type="text" placeholder="请输入新用户名" v-model="settingInfoData.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="100px" prop="password" >
          <el-input id="pwdInfo" type="text" placeholder="请输入新密码" v-model="settingInfoData.password"></el-input>
        </el-form-item>
        <el-form-item label="性别" label-width="100px" prop="gender" >
          <el-select id="genderInfo" v-model="settingInfoData.gender" placeholder="请选择性别">
            <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄" label-width="100px" prop="age" >
          <el-input id="ageInfo" type="text" placeholder="请输入年龄" v-model="settingInfoData.age"></el-input>
        </el-form-item>
        <el-form-item label="电话" label-width="100px" prop="phone" >
          <el-input id="phoneInfo" type="text" placeholder="请输入电话号码" v-model="settingInfoData.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮件" label-width="100px" prop="email" >
          <el-input id="emailInfo" type="text" placeholder="请输入邮箱" v-model="settingInfoData.email"></el-input>
        </el-form-item>
        <el-form-item label-width="100px">
          <el-button type="primary" @click="updateInfoData('settingInfoData')">修改</el-button>
          <el-button @click="userInfoCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import {updateUserInfo} from "@/network/profile/updateUserInfo";

  export default {
    name: "ProfileContentBar",
    data() {
      //校验手机号码
      let checkPhone = (rule, value, callback) => {
        let reg = /^1[345789]\d{9}$/;
        if (!reg.test(value)) {
          callback(new Error('请输入11位手机号'));
        } else {
          callback();
        }
      }
      return {
        activeName: 'first',
        username: this.$store.getters.getUserName,
        gender: this.$store.getters.getGender,
        age: this.$store.getters.getAge,
        phone: this.$store.getters.getPhone,
        email: this.$store.getters.getEmail,
        settingInfoData: {
          username: '',
          password: '',
          age: '',
          gender: '',
          phone: '',
          email: '',
        },
        settingInfoRules: {
          username: [
            { required: false, message: '请输入新的用户名', trigger: 'blur' },
          ],
          password: [
            { required: false, message: '请输入密码', trigger: 'blur' },
          ],
          age: [
            { required: false, message: '请输入年龄', trigger: 'blur' },
            { min: 1, max: 3, message: '长度在 1 到 3 个字符', trigger: 'blur' }
          ],
          gender: [
            { required: false, message: '请选择性别', trigger: 'change' },
          ],
          phone: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { type: 'number', validator: checkPhone, message: '请输入11位有效手机号号码', trigger: ['blur', 'change'] }
          ],
          email: [
            { required: false, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ]
        },
        value: new Date(),
      }
    },
    methods: {
      updateInfoData(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.settingInfoData.username = document.getElementById('unameInfo').value;
            this.settingInfoData.password = document.getElementById('pwdInfo').value;
            this.settingInfoData.age = document.getElementById('ageInfo').value;
            this.settingInfoData.gender = document.getElementById('genderInfo').value;
            this.settingInfoData.phone = document.getElementById('phoneInfo').value;
            this.settingInfoData.email = document.getElementById('emailInfo').value;
            let uid = this.$store.getters.getUid;
            if (this.settingInfoData.gender === '男') {
              this.settingInfoData.gender = '0';
            } else if (this.settingInfoData.gender === '女') {
              this.settingInfoData.gender = '1';
            } else {
              this.settingInfoData.gender = '';
            }
            if (this.settingInfoData.username === '') {
              this.settingInfoData.username = this.$store.getters.getUserName;
            }
            if (this.settingInfoData.password === '') {
              this.settingInfoData.password = this.$store.getters.getPassWord;
            }
            if (this.settingInfoData.age === '') {
              this.settingInfoData.age = this.$store.getters.getAge;
            }
            if (this.settingInfoData.gender === '') {
              if(this.$store.getters.getGender === '男') {
                this.settingInfoData.gender = '0';
              } else {
                this.settingInfoData.gender = '1';
              }
            }
            if (this.settingInfoData.phone === '') {
              this.settingInfoData.phone = this.$store.getters.getPhone;
            }
            if (this.settingInfoData.email === '') {
              this.settingInfoData.email = this.$store.getters.getEmail;
            }
            // eslint-disable-next-line no-console
            console.log(uid, this.settingInfoData.username,this.settingInfoData.password,this.settingInfoData.age,this.settingInfoData.gender,this.settingInfoData.phone,this.settingInfoData.email);
            updateUserInfo(uid,this.settingInfoData.username,this.settingInfoData.password,this.settingInfoData.age,this.settingInfoData.gender,this.settingInfoData.phone,this.settingInfoData.email).then(res => {
              // eslint-disable-next-line no-console
              console.log(res);
              if (res.code === '1') {
                alert("修改成功");
                this.logOut();
              }else {
                alert("修改失败");
              }
            }).catch(err => {
              // eslint-disable-next-line no-console
              console.log(err);
            })
          }
        })
      },
      logOut() {
        this.$store.commit('setIsLogin', false);
        window.localStorage.setItem('loginJudge', 'false');
        this.$router.replace('/home');
      },
      userInfoCancel() {
        this.$router.go(0);
      }
    },
  }
</script>

<style>
.is-selected {
  color: #1989FA;
}
</style>

<style scoped>
  #profileContent {
    position: absolute;
    top: 48%;
    width: 100%;
    height: 150%;
    /*border: 1px solid;*/
  }
  #foodRecommend {
    position: absolute;
    width: 35%;
    height: 95%;
    left: 5%;
    top: 2%;
    background-color: white;
    border-radius: 10px;
    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.2);
    /*border: 1px solid;*/
  }
  #profileInfo {
    position: absolute;
    width: 50%;
    height: 95%;
    left: 45%;
    top: 2%;
    background-color: white;
    border-radius: 10px;
    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.2);
    /*border: 1px solid;*/
  }
  #profileInfo .el-tabs {
    position: absolute;
    /*border: 1px solid;*/
    width: 94%;
    height: 95%;
    top: 3%;
    left: 3%;
  }
  #personalInfo {
    position: absolute;
    top: 5%;
    left: 5%;
    font: 18px sans-serif;
    color: #74982A;
  }
  #infoTable {
    position: absolute;
    top: 10%;
    width: 60%;
    left: 9%;
    height: 230px;
    /*border: 1px solid;*/
  }
  #infoSetting {
    position: absolute;
    top: 40%;
    left: 5%;
    font: 18px sans-serif;
    color: #74982A;
  }
  #settingTable {
    position: absolute;
    top: 48%;
    width: 70%;
    height: 40%;
    /*border: 1px solid;*/
  }
  #profileCalendar {
    position: absolute;
    /*border: 1px solid;*/
    top: 5%;
    width: 100%;
  }
</style>